iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0

做到目前大概是這樣↓
https://ithelp.ithome.com.tw/upload/images/20200919/20130249TI5CbKCNRc.jpg
雖然乍看之下滿整齊的,但其實就是把東西一字排開放在桌上,沒有去整理分類,之後加上CSS之後也不好調整。
桌面很亂會想要使用收納盒,城市很亂當然也需要收納盒,有請我們的--<div>

<div>

div是html裡面我覺得最神奇的標籤。就像一個個收納盒一樣,將想要分組的各個部份裝起來,簡直是整理控的最愛 (?) 。
https://ithelp.ithome.com.tw/upload/images/20200919/20130249lhkg5rrQRV.jpg
以這張圖為例,各個顏色的框代表不同的 div ,將他們用 <div> </div> 包起來之後,加上 class 就可以對整個div 使用CSS ,客製化或統一各個收納盒,不管是對內部元件進行對齊或是其他修改都非常方便。
不過要小心的是 div 標籤的前後自動附加著換行,在排版的時候需要特別注意。
那就開始把之前的內容用 div 包起來吧!
https://ithelp.ithome.com.tw/upload/images/20200919/20130249TAtvAqywgW.jpg
加上 div 之後,程式變成巢狀結構,幫程式加上縮排讓他更容易閱讀,也能清楚分辨階層,div那行的程式最前面也會出現減號,點擊就可以把整段暫時摺疊收納!


下一章 Keep Going

※本文章所使用之圖片皆為本人作品,內容則為本人之經驗分享


上一篇
Day 06 | 圖片與 Font awesome
下一篇
Day 08 | Keep Going 1
系列文
挑戰!用30天做一個自己的履歷作品集網頁!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言